<template>
	<div>
		<div class="search">
			<input v-model="keyword" class="search-input" type="text" placeholder="输入城市名或拼音" />
		</div>
		<div 
			class="serch-content" 
			ref="search"
			v-show="keyword"
		>
			<ul>
				<li  
					class="search-item" 
					v-for="item of list"
					border-bottom
					:key="item.id"
					@click="handleCityClick(item.name)"
				>
					{{item.name}}
				</li>
				<li class="search-item" border-bottom v-show="hasnodata">
					没有找到匹配数据
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import Bscroll from 'better-scroll'
	export default{
		name:'CitySearch',
		props:{
			cities:Object
		},
		data (){
			return{
				keyword:"",
				list:[],
				timer:null
			}
		},
		// 优化代码
		computed:{
			hasnodata(){
				return !this.list.length
			}
		},
		// 实现搜索
		watch:{
			keyword(){
				if(this.timer){
					clearTimeout(this.timer)
				}
				// 实现显示隐藏
				if(!this.keyword){
					this.list = []
					return
				}
				this.timer= setTimeout(()=> {
					const result = []
					for (let i in this.cities) {
						this.cities[i].forEach((value) =>{
							if (value.spell.indexOf(this.keyword) >-1||
							value.name.indexOf(this.keyword)>-1){
								result.push(value)
							}
						})
					}
					this.list = result
				},100)
			}
		},
		// 实现滚动
		mounted() {
			this.scroll = new Bscroll(this.$refs.search)
		},
		methods:{
			handleCityClick (city) {
					this.$store.commit/* dispatch 用这种方法要通过action,所以可以直接通过commit实现*/('changeCity',city)
					this.$router.push('/')
				}
			}
	}

</script>

<style lang="stylus" scoped>
	@import '~styles/varibles.styl'
	.search
		height:.72rem
		background:$bgcolor
		padding:0 .1rem
		.search-input
			box-sizing: border-box
			width:100%
			height:.62rem
			line-height:.62rem
			padding:0 .1rem
			text-align:center
			border-radius:.06rem
			color:#666
	.serch-content
		z-index:1
		overflow:hidden
		position:absolute
		top:1.58rem
		right:0
		bottom:0
		left:0
		background:#eee
		.search-item
			line-height:.62rem
			padding-left: .2rem
			background:#fff
			color: #666
			
</style>
